<template>
    <div class='Login'>
        <popup :show.sync="show" height="100%" class="popup-dialog">
            <div class="popup1">
                <group>
                    <div class='login-module'>
                        <div class="login-title">登录</div>
                        <div class='login-phone'>
                            <p class="login-text">手机号</p>
                            <div>
                                <x-input is-type="china-mobile" :show-clear=true placeholder="输入手机号" :value.sync="phone" class='sloth-input'></x-input>
                            </div>
                        </div>
                        <div class="login-verifycode">
                            <p class="login-text">验证码</p>
                            <div>
                                <x-input text-align='left' :show-clear=false placeholder="输入验证码" :value.sync="code" class='sloth-input sloth-input-verifycode'>
                                    <div class='verifycode-get' v-bind:class="{'verifycode-unavailable': perSecond !== 0}" @click='sendCode'><a>{{ tips }}</a></div>
                                </x-input>
                            </div>
                        </div>
                        <button @click="loginByCode" class="login-button">登录</button>
                        <span class="login-close" @click='loginClose'><icon type="clear"></icon></span>
                    </div>
                </group>
            </div>
        </popup>
    </div>
</template>

<script>
import * as Account from '../../../services/account.js'
import Group from 'vux-components/group'
import XInput from 'vux-components/x-input'
import Popup from 'vux-components/popup'
import Icon from 'vux-components/icon'
import warn from '../Toast/index.js'
import {BusinessException} from "../../../request"

export default {
    replace: true,
    components: {
        XInput,
        Group,
        Popup,
        Icon,
    },
    props: {
        show: Boolean,
    },
    data() {
        return {
            // note: changing this line won't causes changes
            // with hot-reload because the reloaded component
            // preserves its current state and we are modifying
            // its initial state
            phone: '',
            code: '',
            perSecond: 0,
            tips: '获取验证码',
        }
    },
    methods: {
        verifyPhone(phone){
            if(/^1[3|4|5|8][0-9]\d{8}$/.test(this.phone)){
                return true;
            }else{
                warn.show('请输入正确的手机号', 'warn');
                return false;
            }
        },
        countDown(){
            clearInterval(this.interval);
            this.interval = setInterval(()=> {
                let second = this.perSecond;
                if (second > 1) {
                    this.perSecond = second-1;
                    this.tips = '('+(second-1) + ')s重新发送';
                } else {
                    clearInterval(this.interval);
                    this.perSecond = 0;
                    this.tips = "重新发送";
                }
            }, 1000);
        },
        sendCode(){
            if(this.perSecond !== 0 || !this.verifyPhone(this.phone)) return
            Account.SendCode(this.phone).then((json)=>{
                this.perSecond = json.throttle.perSecond;
                this.countDown();
                warn.show('验证码已经发送', '');
            }).catch((e)=>{
                if (e instanceof BusinessException && e.info.errorSendCode) {
                    Toast.show(e.info.errorSendCode.Message, { duration: durations.LONG })
                    return
                }
                throw e
            })
        },
        loginByCode(){
            this.verifyPhone(this.phone) && Account.LoginByCode(this.phone, this.code).then((json)=>{
                warn.show('登录成功','');
                this.$parent.hidden();
                window.location.reload();
            }).catch((e)=>{
                if (e instanceof BusinessException && e.info.errorSendCode) {
                    Toast.show(e.info.errorSendCode.Message, { duration: durations.LONG })
                    return
                }
                throw e
            });
        },
        loginClose(){
            this.$parent.hidden();
        },
    },
    ready(){},
    destroyed(){
        clearInterval(this.interval);
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='sass' >
    @import '~vux/dist/vux.css';
    @import './Login.scss';
</style>
